<template>
  <div class="map-box">
    <div class="map" id="map"></div>
    <div class="btns-box">
      <el-select v-model="selectValue" placeholder="请选择图形进行绘画" size="small" @change="changeDraw">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import { Circle as CircleStyle, Fill, Stroke, Style } from "ol/style";
import { Draw, Modify, Snap } from "ol/interaction";
import { Vector as VectorSource } from "ol/source";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import TileArcGISRest from "ol/source/TileArcGISRest";

import CONSTANT from "@/config/constant.js";

export default {
  name: "modifyFeature",

  data() {
    return {
      map: null,
      drawVector: null,
      drawSource: null,
      draw: null,
      snap: null,
      selectValue: "",
      options: [
        {
          value: "Point",
          label: "Point"
        },
        {
          value: "LineString",
          label: "LineString"
        },
        {
          value: "Polygon",
          label: "Polygon"
        },
        {
          value: "Circle",
          label: "Circle"
        }
      ]
    };
  },

  methods: {
    init() {
      // 绘制图层
      this.drawSource = new VectorSource();
      this.drawVector = new VectorLayer({
        source: this.drawSource,
        style: new Style({
          fill: new Fill({
            color: "rgba(255, 255, 255, 0.2)"
          }),
          stroke: new Stroke({
            color: "#ffcc33",
            width: 2
          }),
          image: new CircleStyle({
            radius: 7,
            fill: new Fill({
              color: "#ffcc33"
            })
          })
        })
      });

      //实例化地图
      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new TileArcGISRest({
              url: CONSTANT.GIS_URL
            })
          }),
          this.drawVector
        ],
        view: new View({
          center: [113.0567, 23.67537],
          maxZoom: 18,
          minZoom: 8,
          zoom: 13,
          projection: "EPSG:4326"
        })
      });

      this.initModify();
    },

    initModify() { 
      const modify = new Modify({ source: this.drawSource });
      this.map.addInteraction(modify);  // 更改要素
    },

    //更改绘画图形
    changeDraw(typeName) {
      if (this.draw) {
        this.map.removeInteraction(this.draw);
        this.map.removeInteraction(this.snap);
      }
      this.draw = new Draw({
        source: this.drawVector.getSource(),
        type: typeName
      });
      this.snap = new Snap({ source: this.drawSource });
      this.map.addInteraction(this.snap);  //鼠标捕捉
      this.map.addInteraction(this.draw);  //图形绘画
    }
  },

  mounted() {
    this.init();
  }
};
</script>

<style lang="less" scoped>
.map-box {
  height: 100%;
  position: relative;
  .map {
    height: 100%;
  }
  .btns-box {
    position: absolute;
    right: 20px;
    top: 20px;
  }
}
</style>